<template>
  <div class="app-container bg-white">
     <div class="page-body">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :label-position="'top'" >
      <el-row :gutter="40">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"><h4>新增会员</h4></el-col>
    </el-row>
        <!-- <div class="tetli"> 新增会员</div> -->
        <el-row :gutter="40">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-form-item label="昵称：" prop="user.name">
          <el-input v-model="ruleForm.user.name" maxlength="10" placeholder="请输入昵称"></el-input>
        </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-form-item label="手机号码：" prop="user.phone">
          <el-input v-model="ruleForm.user.phone" maxlength="11" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-form-item label="邮箱：" prop="user.email">
          <el-input v-model="ruleForm.user.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
         <el-form-item label="密码：" prop="password">
          <el-input type="text" v-model="ruleForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        </el-col>
        </el-row>
        <i class="xuxian"></i>
      
      <el-row :gutter="40">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-form-item label="真实姓名：">
          <el-input placeholder="请输入真实姓名" v-model="ruleForm.user.realName" maxlength="10"></el-input>
        </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-form-item label="性别：">
          <el-radio-group v-model="ruleForm.user.gender">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-form-item label="生日：">
           <el-date-picker
                v-model="ruleForm.user.birthday"
                type="date"
                :picker-options="expireTimeOption"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期：">
          </el-date-picker>
        </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-form-item label="地区：">
            <el-cascader :options="options" placeholder="请选择地区" :show-all-levels="false" v-model="categoryId"
              :props="{ value: 'id',label:'name',children:'children',dep:'id' }" @change="handleChangeData">
            </el-cascader>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-form-item label="职业：">
          <el-input placeholder="请输入职业" v-model="ruleForm.vocation" maxlength="10" onkeyup="this.value=this.value.replace(/\D/g,'')"></el-input>
        </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-form-item label="身高：">
          <el-input placeholder="请输入身高" style="width: 9vw!important;margin-right: 12px;" type="number" onkeyup="this.value=this.value.replace(/\D/g,'')" maxlength="3" v-model="ruleForm.height"></el-input><span style="font-size: 16px;">cm</span>
        </el-form-item>
        </el-col>
      </el-row>
        <i class="xuxian"></i>
         <el-form-item>
           <div class="anniu">
               <el-button type="primary" style="margin-right: 20px;" @click="submitForm('ruleForm')">保存</el-button>
               <el-button @click="cancel">返回</el-button>
           </div>
        </el-form-item>
    </el-form>
  </div>
  </div>
</template>
<script>
import { Newmembers} from '@/api/member'
import {provinceMerchabt} from '@/api/merchants'
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
        const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
        if (!value) {
          return callback(new Error('手机号码不能为空'))
        }
        setTimeout(() => {
          if (!phoneReg.test(value)) {
            return callback(new Error('请输入正确的手机号码'))
          } else {
            callback()
        }
        })
    }
    return {
      categoryId:[],
      options:[],//地区数据
      ruleForm: {
        creatorId:JSON.parse(this.$store.state.user.userInfo).id,//创建人id
        password:'',//密码
        realName:'',//真实姓名 
        vocation:'',//职业
        height:'',//身高cm
        cityName:'',//城市名
        provinceName:'',//省名
        districtName:'',//区名
        city:'',//市编码（如果有市名市编码不能为空）
        province:'',//省编码（如果有省名省编码不能为空）
        district:'',//区编码（如果有区名区编码不能为空）
        user:{
            creatorId:JSON.parse(this.$store.state.user.userInfo).id,//创建人id
            name:'',//昵称
            phone:'',//手机号
            email:'',//邮箱
            gender:'1',//男女 0女1男
            birthday:'',//生日
        }
      },
      rules: {
        "user.name": [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        "user.phone": [
          { required: true,validator: checkPhone, trigger: 'blur' },
        ],
        "user.email": [
           { required: true, message: '请输入邮箱地址', trigger: 'blur' },
           { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      expireTimeOption: {
        disabledDate(date) { 
          return date.getTime() > Date.now();
        }
      }
    }
    
  },
  created(){
     this.provinceShow()//省
  },
   watch: {
      categoryId(val) {
        this.ruleForm.provinceName = val[0]
        this.ruleForm.cityName = val[1]
        this.ruleForm.districtName = val[2]
      }
      
  },
  methods: {
     async provinceShow() {//获取省的数据
      let res = await provinceMerchabt()
      this.options = res.data
    },
     handleChangeData(val){
      this.options.forEach((item,index) => {
           if(item.id == val[0]) {
            this.ruleForm.provinceName = item.name
           }
           item.children.forEach((itemCity,cityIndex) => {
               if(itemCity.id == val[1]) {
                this.ruleForm.cityName = itemCity.name
               }
               itemCity.children.forEach((districtItem,districtIndex) => {
                   if(districtItem.id == val[2]) {
                    this.ruleForm.districtName = districtItem.name
                   }
               })
           })
       })
    },
    //新增会员接口
    async confirm() {
      const res = await Newmembers(this.ruleForm)
      if (res.code == 200) {
        console.log(res)
         this.$message.success('新增会员成功!');
      }else{
         this.$message.error('新增会员失败!');
      }
    },
    //保存
    submitForm(formName) {
      console.log(this.ruleForm)
        this.$refs[formName].validate((valid) => {
          if (valid) {
             this.confirm()
             this.$router.go(-1);
          } else {
            return false;
          }
        });
      },
    cancel(){
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped lang="scss">
.demo-ruleForm {
  max-width: 1064px;
    // padding: 0 100px;
    box-sizing: content-box;
}

// .all {
//   box-sizing: border-box;
//   padding: 15px;
// }
// .informa {
//   width: 100%;
//   height: auto;
//   background-color: #fff;
//   background-color: #fff;
//   padding: 15px;
//   padding-bottom: 40px;
// }
//  .phones ::v-deep .el-form-item__content {
//    display: inline-flex;
// } 
//  .informa ::v-deep .el-form-item__label {
//    width: 150px !important;
//    margin-top: 15px!important;
//  } 
// .el-form-item{
//   display: inline;
// }
//  .el-input{
//   width:40vw !important;
  
// }
// .el-form-item__label{
//   padding:0px !important;
// }
// .tetli{
//   height: 60px;
//   line-height: 60px;
//   font-weight: bold;
//   border-bottom: 2px solid #F6F6F6;
//   margin-bottom: 30px;
// }
// .aptitudes{
//  .updata{
//    display: inline-block;
//    width:40%;
//  }
// }
// ::v-deep input::-webkit-outer-spin-button,
// ::v-deep input::-webkit-inner-spin-button {
//     -webkit-appearance: none;
// }
.xuxian{
    width: 100%;
    height: 1px;
    border-bottom: 2px dashed #F3F3F3;
    display: inline-block;
    margin-top: 45px;
    margin-bottom: 30px;
}
// .anniu{
//     margin-left: 350px;
//     width: 100%;
// }
::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 100%;
}
::v-deep .el-cascader--medium{
  width: 100%;
}
</style>
